三级菜单

三级菜单

*{margin:0;padding:0}
ul{
  width/height
  margin:50px auto;
}
ul li{
  width/height/line-height/float:left;
  list-style:none; text-align:center;
}
ul li a{
  color/text-decoration/display:block
}
ul li ul{
  margin:0/margin-left/margin-right
}
//清除二级菜单浮动
ul li ul li{ clear:both}
//设置二级菜单距离
ul li ul li ul{
  margin-left/margin-top
}
//一开始2、3级菜单都隐藏
ul li ul{
  display:none
}
//鼠标经过第1级、2级显示、3级隐藏
//这一层2、3级都显示
ul li:hover ul{
  display:block
}
//这一层3级隐藏
ul li:hover ul li ul{
  display:none  
}
//鼠标经过的时候显示3级
ul li ul li:hover ul{
  display:block;
}

总结

1.先把静态结构搭建好

2.清除2级菜单浮动、设置2级菜单距离

3.重点

(1)一开始2、3级菜单都隐藏：ul li ul{display:none}

(2) 滑1显示2级隐藏3

(3)滑2显示3